<template>
	<!-- <link rel="icon" href="https://nj-hqb.oss-cn-hangzhou.aliyuncs.com/h5/bitbug_favicon.ico"><title>嗨趣宝管理后台</title> -->
	<div class="login-wapper">
		<el-row>
			<el-col :span="12" class="left">
				<div>
					<h1>Hello!</h1>
					<h2>欢迎来到后台管理 ！</h2>
					<el-form :model="loginForm" ref="loginFormRef" :rules="loginFormRules">
						<el-form-item prop="username">
							<el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input v-model="loginForm.verifyCode" prefix-icon="el-icon-key"></el-input>
							<div class="verifyCode-wapper">
								<img :src="loginForm.verifyCodeImg" class="verifyCode" alt="">
								<span @click="getVerifyCodeImg">看不清，换一个</span>
							</div>
						</el-form-item>
					</el-form>
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="info" @click="reset">重置</el-button>
				</div>
			</el-col>
			<el-col :span="12">
				<img src="@/assets/login_bg.png" alt="">
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default{
	data(){
		return{
			loginForm:{
				username:'',
				password:'',
				verifyCode:'',
				verifyCodeImg:''   //验证码图片
			},
			loginFormRules:{
				username:[
					{ required: true, message: '请输入用户名', trigger: 'blur' },
				],
				password:[
					{ required: true, message: '请输入密码', trigger: 'blur' },
				],
			}
		}
	},
	mounted() {
		
	},
	created(){
		this.getVerifyCodeImg()
	},
	methods:{
		async getVerifyCodeImg(){
			const res= await this.$http.get('/kaptcha',{responseType: 'arraybuffer'})
			this.loginForm.verifyCodeImg= this.arrayBufferToBase64(res.data)
		},
		reset(){
			this.$refs.loginFormRef.resetFields();
		},
		login(){
			this.$refs.loginFormRef.validate(async valid=>{
				// console.log(valid);
				if(!valid) return;
				const {data:res} = await this.$http.post('/login',{username:this.loginForm.username,password:this.loginForm.password,kaptcha:this.loginForm.verifyCode})
				console.log(res)
				if(res.code !==200){
					this.getVerifyCodeImg()
					return this.$message.error(res.msg)
				} 
				localStorage.setItem("tokenlo", res.data.sessionId);
				localStorage.setItem("realName", res.data.realName);
				localStorage.setItem("username", this.loginForm.username);
				this.$message.success('登录成功')
				this.$router.push({path:"/home"})
			})
		},
		arrayBufferToBase64(buffer){
		      let binary = "";
		      let bytes = new Uint8Array(buffer);
		      let len = bytes.byteLength;
		      for (let i = 0; i < len; i++) {
		        binary += String.fromCharCode(bytes[i]);
		      }
		      return "data:image/jpeg;base64," + window.btoa(binary);
		    }
	}
}
</script>

<style lang="less" scoped>
	.el-row,.el-col{
		height: 100%;
		img{
			height: 100%;
			width: 100%;
		}
	}
	.login-wapper{
		height: 100%;
		.left{
			padding-left: 100px;
			display: flex;
			align-items: center;
			h1{
				font-size: 50px;
				font-weight: normal;
				width: 100%;
			}
			h2{
				margin-top: 20px;
				font-size: 25px;
				font-weight: normal;
				width: 100%;
			}
			.el-form{
				margin-top: 40px;
				width: 100%;
			}
			.el-input{
				color: #333333;
				width: 500px;
			}
			.verifyCode-wapper{
				position: absolute;
				right: 20px;
				top: 0;
				display: flex;
				align-items: center;
				.verifyCode{
					width: 110px;
					height: 40px;
				}
				span{
					cursor: pointer;
					color: #0088CC;
					margin-left: 10px;
				}
			}
			
		}
	}
</style>
